<template>
  <el-drawer v-bind='$attrs' :title="$t('common.detail')" v-on='$listeners' size="800px">
    <div class='px-7' style='padding-bottom: 20px;'>
      <el-descriptions :column="1" border>
        <el-descriptions-item labelStyle="width: 200px" :label="$t('developer.device_apply.apply_batch_no')">{{ dataForm.deviceApplyBatchNo }}</el-descriptions-item>
        <el-descriptions-item :label="$t('developer.device_apply.device_model_list')">
          <div style='line-height: 2.4'>
            <el-tag
              style='margin-left: 5px'
              size='small'
              v-for="modelCode in deviceModels"
              :key="modelCode">{{ modelCode }}</el-tag>
          </div>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('developer.device_apply.apply_email')">{{ dataForm.email }}</el-descriptions-item>
        <el-descriptions-item :label="$t('developer.device_apply.phone_number')">{{ dataForm.phoneNumber }}</el-descriptions-item>
        <el-descriptions-item :label="$t('developer.device_apply.address')">{{ dataForm.address }}</el-descriptions-item>
        <el-descriptions-item v-if='dataForm.status === 2' :label="$t('developer.device_apply.reject_reason')">{{ dataForm.rejectReason }}</el-descriptions-item>
        <el-descriptions-item :label="$t('developer.device_apply.status')">
          <el-tag v-if='dataForm.status === 0' size="small" type='private'>{{ statusFilter(dataForm.status) }}</el-tag>
          <el-tag v-if='dataForm.status === 1' size="small" type='success'>{{ statusFilter(dataForm.status) }}</el-tag>
          <el-tag v-if='dataForm.status === 2' size="small" type='warning'>{{ statusFilter(dataForm.status) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('developer.device_apply.apply_time')">{{ dateTimeFilter(dataForm.applyTime) }}</el-descriptions-item>
        <el-descriptions-item :label="$t('common.remark')">{{ dataForm.remark }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </el-drawer>
</template>

<script>
import { timeFilter, dateTimeFilter } from '@/filters'
export default {
  data() {
    return {
      deviceModels: [],
      dataForm: {}
    }
  },
  methods: {
    timeFilter,
    dateTimeFilter,
    statusFilter(status) {
      const statusMap = {
        0: this.$t('developer.device_apply.apply_status_list.wait_for_audit'),
        1: this.$t('developer.device_apply.apply_status_list.approved'),
        2: this.$t('developer.device_apply.apply_status_list.reject')
      }
      return statusMap[status]
    },
    init(deviceApplyInfo) {
      this.deviceModels = []
      this.dataForm = deviceApplyInfo
      deviceApplyInfo.deviceModels.split(',').forEach((model) => {
        this.deviceModels.push(model)
      })
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
